<template>
  <div>
    <p>vuex的使用</p>
    <p>获取store中的公用数据：{{ $store.state }}</p>
    <p>获取store中的getters：{{ $store.getters.nextAge }}</p>
    <button @click="changeAge1">年龄+1</button>
    <p>余额：{{ $store.state.money }}</p>
    <input type="text" v-model="val1" />
    <button @click="recharge">充值</button>
    <br />
    <button @click="changeAge2">对象风格-age</button>
    <button @click="recharge2">对象风格-money</button>
    <br>
    <button @click="getList">获取分类列表-1</button>
    <button @click="getList2">获取分类列表-2</button>
    <hr>
    <p>{{age}} {{isLogin}} {{myNextAge}}</p>
    <button @click="myChangeAge">map-改年龄</button>
    <hr>
    <p>模块化</p>
    <p>{{$store.state.user.info.name}}</p>
    <p>{{goods.list[0]}}</p>
    <p>两个getters的区别 是否开启命名空间.如果开启就会留在局部 没有开启就放在全局</p>
    <!-- 访问方式是['user/nextLevel'] 不是xxx.xxx -->
    <p>{{$store.getters['user/nextLevel']}}</p>
    <p>{{$store.getters.goodsLen}}</p>
  </div>
</template>

<script>
import {changeAge,recharge,recharge2,saveList } from '../store/mutation_type'
// 引入辅助函数 将store中的数据函数 映射到这个组件中 看起来就像组件中有了这些数据和方法 就像投影仪
import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
export default {
  data() {
    return {
      val1: "",
    };
  },
  computed: {
    // 这里还可以写原来的计算属性
    xxx() {
      return '123'
    },
    ...mapState([
      // 变量名还用原来的,这里的数组，直接写store中的数据名
      'age',
      'isLogin',
      'goods'
    ]),
    ...mapGetters({
      // 可以改名字，避免重名，这里是对象，{新名字：老名字}
      'myNextAge': 'nextAge'
    })
  },
  methods: {
    ...mapMutations({
      'myChangeAge': 'changeAge'
    }),
    // ...mapActions(),
    changeAge1() {
      // 通过commit调用mutation 触发数据的更新
      this.$store.commit(changeAge);
    },
    changeAge2() {
      // 对象风格的提交方式
      this.$store.commit({
        type: changeAge,
      });
    },
    recharge() {
      this.$store.commit(recharge, this.val1 - 0);
    },
    recharge2() {
      this.$store.commit({
        type: recharge2,
        num: this.val1 - 0,
      });
    },
    getList() {
      // action = axios + mutation
      // 绕开action
      this.$http('http://localhost:3000/play/category')
      .then(res => {
        console.log(res);
        this.$store.commit(saveList, res)
      })
    },
    getList2() {
      // 封装成action
      this.$store.dispatch('saveListAsync')
    }
  },
};
</script>

<style>
</style>